<template>
  <div style="display: inline-block;">
    <el-button type="success" class="buttoncss" @click="dialogTableVisible = true">角色</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="角色">
      <el-form ref="row_data" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="role" prop="shop_role_id">
          <template>
            <el-checkbox-group v-model="roleIds">
              <el-checkbox v-for="role in roles" :label="role.id" :key="role.id" name="shop_role_id" style="margin-right: 20px">{{ role.name }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">edit</el-button>
          <el-button @click="close()">cancel</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/buttonStyle.css'
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { addRole } from '@/api/shop_admin_auth/adminPage'
import store from '@/store'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  // props: ['row_data', 'role_list'],
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    },
    role_list: {
      type: Array,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      roleIds: [],
      dialogTableVisible: false,
      shop: null,
      roles: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      var currrentRoleIds = this.row_data.role_id
      if (typeof (currrentRoleIds) === 'undefined') {
        this.roleIds = []
      } else {
        var currrentRoles = currrentRoleIds.split(',')
        this.roleIds = currrentRoles.map(Number)
      }
      this.roles = this.role_list
    },

    submitForm() {
      var form_data = {
        shop_page_id: this.row_data.id,
        shop_role_id: this.roleIds
      }
      addRole(store.getters.token, form_data).then(res => {
        if (res.data.status) {
          this.$message.success(res.data.msg)
          this.$emit('addRole')
          this.close()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>
